<template>
  <div class="app-container">
    <!--搜索框-->
    <el-form :model="selectParams" ref="queryForm" size="small" :inline="true" label-width="68px">
      <el-form-item label="图书名称" prop="name">
        <el-input
          v-model="selectParams.bookName"
          placeholder="请输入图书名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="selectParams.isBack" placeholder="全部" clearable>
          <el-option label="未归还" value="0">未归还</el-option>
          <el-option label="已归还" value="1">已归还</el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="借阅日期" prop="lendDate">
        <el-date-picker
          v-model="lendDate"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="应还日期" prop="shouldBackTime">
        <el-date-picker
          v-model="shouldBackTime"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="归还日期" prop="shouldBackTime">
        <el-date-picker
          v-model="backDate"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      </el-form-item>
    </el-form>

    <!--    <el-row :gutter="10" class="mb8">-->
    <!--      <el-col :span="1.5">-->
    <!--        <el-button-->
    <!--          type="danger"-->
    <!--          plain-->
    <!--          icon="el-icon-delete"-->
    <!--          size="mini"-->
    <!--          :disabled="multiple"-->
    <!--          @click="handleDelete"-->
    <!--        >删除-->
    <!--        </el-button>-->
    <!--    </el-row>-->

    <!--表单-->
    <el-table v-loading="loading" :data="borrowList">
      <!--      <el-table-column type="selection" width="55" align="center"/>-->
      <el-table-column label="借阅编号" width="100px" align="center" prop="lendId"/>
      <el-table-column label="图书名称" align="center" prop="bookName"/>
      <el-table-column label="借阅时间" align="center" prop="lendDate"/>
      <el-table-column label="应还时间" align="center" prop="shouldBackTime"/>
      <el-table-column label="归还时间" align="center" prop="backDate">
        <template slot-scope="data">
          <div v-if="data.row.backDate === null">------</div>
          <div v-if="data.row.backDate !== ''">{{ data.row.backDate }}</div>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="state">
        <template slot-scope="data">
          <el-tag type="success" v-if="isBack(data.row)">已归还</el-tag>
          <el-tag type="warning" v-else-if="isLose(data.row)">已丢失</el-tag>
          <el-tag type="danger" v-else-if="isLate(data.row)">已逾期</el-tag>
          <el-tag type="info" v-else>未归还</el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center" width="200px">
        <template slot-scope="data">
          <el-popconfirm
            title="是否确认归还"
            @confirm="returnBook(data.row.lendId)"
          >
            <el-button type="text" size="mini" :disabled="isBack(data.row) || isLose(data.row)" slot="reference">
              归还图书 |
            </el-button>
          </el-popconfirm>
          <el-popconfirm
            title="是否提交丢失申请"
            @confirm="submit(data.row.lendId)"
          >
            <el-button type="text" size="mini" :disabled="isBack(data.row) || isLose(data.row)" slot="reference">
              丢失申请 |
            </el-button>
          </el-popconfirm>
          <el-popconfirm
            title="是否进行续借"
            @confirm="continueBorrow(data.row.lendId)"
          >
            <el-button type="text" size="mini" :disabled="isBack(data.row) || isLose(data.row)" slot="reference">
              续借图书
            </el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!--分页组件-->
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="selectParams.pageNum"
      :limit.sync="selectParams.pageSize"
      @pagination="getBorrowList"
    />

  </div>
</template>

<script>
import {
  continueBorrowRequest,
  getBorrowListRequest,
  getExpiringRequest,
  logicalDeleteBorrow,
  returnBookRequest,
  submitRequest
} from '@/api/system/borrow'

export default {
  name: 'borrowList',
  data() {
    return {
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 查询参数
      selectParams: {
        pageSize: 10,
        pageNum: 1,
        bookName: '',
        userId: this.$store.state.user.id,
        isBack: '',
        lendDateBegin: '',
        lendDateLast: '',
        shouldBackTimeBegin: '',
        shouldBackTimeLast: '',
        backDateBegin: '',
        backDateLast: ''
      },
      lendDate: '',
      shouldBackTime: '',
      backDate: '',
      form: {},
      // 借阅记录数据
      borrowList: []
    }
  },
  mounted() {
    this.getBorrowList()
  },
  methods: {
    // 获取今天日期(YYYY-MM-DD)
    getNewDate() {
      let date = new Date()
      let mouth = ((date.getMonth() + 1) + '').length === 1 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1)
      let day = (date.getDate() + '').length === 1 ? '0' + date.getDate() : date.getDate()
      return date.getFullYear() + '-' + mouth + '-' + day
    },

    /*
      判断展示借阅记录状态
     */
    // 判断是否归还
    isBack(data) {
      return data.backDate !== null
    },
    // 判断是否丢失
    isLose(data) {
      return data.state === 1
    },
    // 判断是否逾期
    isLate(data) {
      return this.getNewDate() > data.shouldBackTime
    },

    /*
      请求方法
     */
    // 请求借阅记录数据
    getBorrowList() {
      this.loading = true
      getBorrowListRequest(this.selectParams).then(res => {
        this.borrowList = res.rows
        this.total = res.total
        this.loading = false
      })
    },
    // 搜索查询
    handleQuery() {
      this.selectParams.pageNum = 1
      let data = []

      // 绑定借阅日期
      if (this.lendDate) {
        data = this.lendDate.map(i => {
          return new Date(i).toLocaleDateString().replaceAll("/","-")
        })
        this.selectParams.lendDateBegin = data[0]
        this.selectParams.lendDateLast = data[1]
      }else {
        this.selectParams.lendDateBegin = ""
        this.selectParams.lendDateLast = ""
      }

      // 绑定应还日期
      if (this.shouldBackTime) {
        data = this.shouldBackTime.map(i => {
          return new Date(i).toLocaleDateString()
        })
        this.selectParams.shouldBackTimeBegin = data[0]
        this.selectParams.shouldBackTimeLast = data[1]
      }else {
        this.selectParams.shouldBackTimeBegin = ""
        this.selectParams.shouldBackTimeLast = ""
      }

      // 绑定归还日期
      if (this.backDate) {
        data = this.backDate.map(i => {
          return new Date(i).toLocaleDateString()
        })
        this.selectParams.backDateBegin = data[0]
        this.selectParams.backDateLast = data[1]
      }else {
        this.selectParams.backDateBegin = ""
        this.selectParams.backDateLast = ""
      }

      // if (this.status === '1') {
      //   this.getExpiringList()
      //   return
      // }
      this.getBorrowList()
    },
    // 请求逻辑删除数据
    // handleDelete(row) {
    //   const lendIds = row.lendId || this.ids
    //   this.$modal.confirm('是否确认删除岗位编号为"' + lendIds + '"的数据项？').then(function() {
    //     let lendIdsStr = lendIds.join(',')
    //     return logicalDeleteBorrow({ lendIds: lendIdsStr })
    //   }).then(() => {
    //     this.getBorrowList()
    //     this.$modal.msgSuccess('删除成功')
    //   })
    // },
    // 请求归还图书
    returnBook(lendId) {
      returnBookRequest({ lendId }).then(() => {
        this.$modal.msgSuccess('归还成功')
        this.getBorrowList()
      }).catch(() => {
        this.$modal.msgError('归还失败')
      })
    },
    // 请求提交丢失申请
    submit(lendId) {
      submitRequest({ lendId }).then(() => {
        this.$modal.msgSuccess('提交成功')
        this.getBorrowList()
      }).catch(() => {
        this.$modal.msgError('提交失败')
      })
    },
    // 请求续借图书
    continueBorrow(lendId) {
      continueBorrowRequest({ lendId }).then(() => {
        this.$modal.msgSuccess('续借成功')
        this.getBorrowList()
      }).catch(() => {
        // this.$modal.msgError('您已经续借两次了，不可继续续借')
      })
    }
    // 请求获取快到期数据
    // getExpiringList() {
    //   this.loading = true
    //   getExpiringRequest(this.selectParams).then(res => {
    //     this.borrowList = res.rows
    //     this.total = res.total
    //     this.loading = false
    //   })
    // }

    // // 多选框选中数据
    // handleSelectionChange(selection) {
    //   this.ids = selection.map(item => (item.lendId))
    //   this.single = selection.length !== 1
    //   this.multiple = !selection.length
    // }
  }
}
</script>

<style>

</style>
